<template>
  <div class="order-detail">
    <h1>订单详情</h1>
    <el-card>
      <div>
        <h3>订单号: {{ order.orderNo }}</h3>
        <p>状态: {{ order.status }}</p>
        <p>创建时间: {{ order.createdAt }}</p>
        <h4>商品列表</h4>
        <el-table :data="[order]" border>
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="unitPrice" label="单价" />
          <el-table-column prop="totalPrice" label="总价" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail } from '@/api/order';

export default {
  data() {
    return {
      order: {
        // 初始化商品列表
      },
    };
  },
  methods: {
    async fetchOrderDetail() {
      const orderNo = this.$route.params.orderNo; // 从路由参数获取订单号
      const response = await getOrderDetail(orderNo); // 调用 API 获取订单详情
      this.order = response.data; // 将获取的订单数据赋值给 order
    },
  },
  mounted() {
    this.fetchOrderDetail(); // 组件挂载时获取订单详情
  },
};
</script>

<style scoped>
.order-detail {
  padding: 20px;
}
</style>
